<template>
  <div class="ui middle aligned center aligned grid login-height">
    <div class="column">
      <h2 class="ui teal image header">
        <div class="content">
          博客管理后台登录
        </div>
      </h2>
      <form class="ui large form">
        <div class="ui segment">
          <div class="field">
            <div class="ui left icon input">
              <i class="user icon"></i>
              <input type="text" v-model="username" placeholder="用户名">
            </div>
          </div>
          <div class="field">
            <div class="ui left icon input">
              <i class="lock icon"></i>
              <input type="password" v-model="password" placeholder="密码">
            </div>
          </div>
          <div @click="logIn" class="ui fluid large teal submit button">登&nbsp;录</div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>

  export default {
    name: "Login",
    data() {
      return {
        username: '',
        password: '',
      }
    },
    methods: {
      logIn() {
        if (this.username===''||this.password==='') {
          this.$message({
            message: '用户名密码不能为空',
            type: 'error',
          })
          return
        }
        let data = {
          username: this.username,
          password: this.password
        }
        this.$store.dispatch("Login", data).then(() => {
          this.$router.push({ path: this.redirect || "/" })
        }).catch(() => {
          this.$message({
            message: '用户名或密码错误',
            type: 'error',
          })
        })
      },
    },
  }
</script>

<style scoped>
  .login-height {
    height: 500px;
  }
  .column {
    max-width: 450px;
  }
</style>
